/*
 * @Author: 路漫漫
 * @Date: 2022-09-19 17:03:40
 * @项目描述: 
 * @Description: 花有重开日，人无再少年
 */
/*
 * @Author: 路漫漫
 * @Date: 2022-09-19 10:03:57
 * @项目描述: 
 * @Description: 花有重开日，人无再少年
 */
import * as echarts from 'echarts';

export default {
	data() {
		return {
			myChart: null,
		}
	},
	methods: {
		// 初始化图表
		initChart({ dom, option, len }) {
			this.myChart = this.myChart || echarts.init(dom);
			this.myChart.setOption(option)
			if (len) {
				this.autoToggle(this.myChart, len)
			}

		},
		// 定时切换高亮
		autoToggle(chart, len) {
			chart.on("mouseover", e => {
				clearInterval(chart.timeInterval)
				chart.dispatchAction({
					type: 'downplay',
					seriesIndex: 0
				})
				chart.dispatchAction({
					type: 'highlight',
					dataIndex: e.dataIndex
				})
			})
			this.timerFun(chart, len)
			chart.on('mouseout', _ => {
				this.timerFun(chart, len)
			})

		},
		// 定时器
		timerFun(chart, len) {
			if (len <= 1) return
			if (chart.timeInterval) clearInterval(chart.timeInterval)
			chart.timeInterval = setInterval(() => {
				// 定时移除高亮
				chart.dispatchAction({
					type: 'downplay',
					seriesIndex: 0
				})
				// 增加index
				chart.dataIndex = chart.dataIndex == undefined ? 0 : (chart.dataIndex + 1 >= len ? 0 : chart.dataIndex + 1)
				// 高亮
				chart.dispatchAction({
					type: 'highlight',
					dataIndex: chart.dataIndex
				})
				chart.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: chart.dataIndex,
				})
			}, 1500)
		}
	},
	destroyed() {
		if (this.myChart?.timeInterval) clearInterval(this.myChart.timeInterval)
	}
}
